import React from 'react'
import {DragDropContextProvider} from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import {connect} from 'react-redux'
import {ActionCreators as UndoActionCreators} from 'redux-undo'
import * as actions from './actions'
import {StencilPanel} from './panels/StencilPanel'
import {Canvas} from "./panels/canvas/Canvas"
import Fullscreen from "react-full-screen"

class RawEditor extends React.Component {
    constructor (props) {
        super(props)

        this.state = {
            expanded: false,
        }
    }

    render () {
        const {model, selectedNode, onNodeSelected, updateModel, onUndo, onRedo, canUndo, canRedo} = this.props

        return (
            <Fullscreen
                enabled={this.state.expanded}
            >
                <DragDropContextProvider backend={HTML5Backend}>
                    <div className='flow-editor-container'>
                        <StencilPanel/>
                        <Canvas
                            model={model}
                            updateModel={updateModel}
                            onNodeSelected={onNodeSelected}
                            selectedNode={selectedNode}
                            onUndo={onUndo}
                            onRedo={onRedo}
                            canUndo={canUndo}
                            canRedo={canRedo}
                            fullScreen={this}
                        />
                    </div>
                </DragDropContextProvider>
            </Fullscreen>
        )
    }
}

const mapStateToProps = state => ({
    selectedNode: state.history.present.selectedNode,
    model: state.history.present.model,
    canUndo: state.history.past.length > 0,
    canRedo: state.history.future.length > 0,
})

const mapDispatchToProps = dispatch => ({
    onNodeSelected: node => dispatch(actions.onNodeSelected(node)),
    updateModel: (model, props) => dispatch(actions.updateModel(model, props)),
    onUndo: () => dispatch(UndoActionCreators.undo()),
    onRedo: () => dispatch(UndoActionCreators.redo()),
})

export const Editor = connect(mapStateToProps, mapDispatchToProps)(RawEditor)
